<!--suppress ALL -->
<template>
  <div>
    <div>
      <div class="searchBg">
        <!--suppress HtmlFormInputWithoutLabel -->
        <input type="text" class="bgColor search" placeholder="搜索城市" v-model="searchKey">
      </div>
      <p class="font14_light" style="padding:16px;margin-top: 8px;background-color: white">选择城市</p>
      <div v-if="!isSearching">
        <div>
          <div v-for="letterBlock in cityListData" class="letter_block font14_dark">
            <p :id="letterBlock.letterKey" class="bgColor letter">{{letterBlock.letterKey}}</p>
            <ul>
              <li class="city_item" v-for="city in letterBlock.cityList" @click="onItemClick(city)">
                {{city.name}}
              </li>
            </ul>
          </div>
        </div>
        <div class="filter font12_theme">
          <div v-for="item in cityListKey" @click="mouseOver(item)" @touchmove.stop.prevent="mouseOver(item)">{{item}}</div>
        </div>
        <div class="active-key" v-if="activeKey">{{activeKey}}</div>
      </div>
      <div v-else>
        <ul>
          <li v-for="city in voList" class="city_item font14_dark" @click="onItemClick(city)">
            {{city.name}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

  //import EditUserInfo from './EditUserInfo'
  import cityDB from './city_list'
  import {userTypes} from '../../../repo/store/user'

  export default {
    data () {
      return {
        cityList: cityDB,
        activeKey: '',
        searchKey: '',
        timer: undefined,
      }
    },
    computed: {
      isSearching () {
        return this.searchKey.trim().length > 0
      },
      cityListData () {
        let map = {} // 处理过后的数据对象
        let temps = [] // 临时变量
        this.cityList.map(city => {
          if (city.nameEn) {
            let letterKey = city.nameEn.charAt(0).toUpperCase() // 根据key值的第一个字母分组，并且转换成大写
            temps = map[letterKey] || [] // 如果map里面有这个key了，就取，没有就是空数组
            temps.push(city)
            map[letterKey] = temps
          }
        })
        let letterBlockList = []
        for (let letterKey in map) {
          letterBlockList.push({
            'letterKey': letterKey,
            'cityList': map[letterKey]
          })
        }

        letterBlockList = letterBlockList.sort((li1, li2) => li1.letterKey.charCodeAt(0) - li2.letterKey.charCodeAt(0))
        return letterBlockList
      },
      cityListKey () {
        let letterList = []
        this.cityListData.map(item => {
          letterList.push(item.letterKey)
        })
        return letterList
      },
      voList: function () {
        if (!this.searchKey) {
          return []
        }
        return this.cityList.filter(city =>
          this._includeKeyWord({
            'name': city.name, 'nameEn': city.nameEn, 'nameTraditional': city.nameTraditional,
          }, this.searchKey))
      },
    },
    methods: {
      mouseOver (key) {
        console.log('mouseOver', key)

        // 当前选中的字母
        this.activeKey = key
        // 1秒后清空，让`active-key`隐藏
        setTimeout(() => {
          this.activeKey = ''
        }, 1000)
        // 获取当前字母来cityList中距离顶部的位置
        let targetTop = document.querySelector('#' + key + '').offsetTop
        window.scrollTo({
          top: targetTop, // 60是search的高度
          behavior: 'smooth'
        })
      },
      _includeKeyWord (data, key) {
        for (let value of Object.values(data)) {
          if (this._contain(value, key)) {
            return true
          }
        }
      },
      _contain (str, key) {
        return str.startsWith(key.toLowerCase())
      },
      onItemClick (city) {
        console.log('city', city)
        this.$store.dispatch(userTypes.EDIT_USER_INFO, {
          'citycode': city.id,
          'cityname': city.name,
        }).then(() => this.$router.go(-1))
      }
    }
  }
</script>


<style scoped>
  .letter_block {
    margin-bottom: 16px;
  }

  .filter {
    position: fixed;
    right: 0px;
    top: 20%;
    z-index: 10;
    width: 70px;
  }

  .filter > div {
    margin-top: 2px;
    padding: 0px 5px;
    text-align: center;
  }

  .active-key {
    position: fixed;
    width: 100px;
    height: 100px;
    line-height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background: #99999999;
    color: #fff;
    border-radius: 100%;
    text-align: center;
    font-size: 40px;
  }

  .searchBg {
    background-color: white;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }

  .search {
    text-indent: 16px;
    width: 100%;
    height: 30px;
    border-radius: 15px;
  }

  .letter {
    padding: 4px 16px;
  }

  .city_item {
    border-bottom: #D8D8D8 1px solid;
    padding: 16px;
    background-color: white;
  }
  .font12_theme {
    font-size: 12px;
    color: #16C393;
  }

  .font14_dark {
    font-size: 14px;
    color: #333333;
  }

  .font14_light {
    font-size: 14px;
    color: #999999;
  }
</style>
